<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
    // 常用键盘事件
    // 1. keyup 按键弹起的时候触法
    // document.onkeyup = function() { // 传统方式
    //     console.log('风起');
    // }
    document.addEventListener('keyup', function() {
        console.log('风起');
    })

    // 2. keydown 按键按下的时候触法
    document.addEventListener('keydown', function() {
        console.log('坐下');
    })

    // 3. keypress  按键按下的时候触法 但是它不识别功能键 比如 ctrl shift 箭头等
    document.addEventListener('keypress', function() {
        console.log('坐下press');
    })

    // 4. 三个事件的执行循序  keydown --> keypress --> keyup

    // 键盘对象
    // 键盘事件对象中的 keyCode 属性可以得到相应键的ASCII码值
    document.addEventListener('keyup', function(e) {
        console.log('up:' + e.keyCode);
        // 如果像区分大小写，可以将这个监听事件中 keyup 改为 keypress
    })

    </script>
</body>
</html>